<template>
  <div class="container_cooperate__list">
    <div
      class="container_cooperate__list__items"
      v-for="(item, index) of cooListItems"
      :key="index"
    >
      <div class="container_cooperate__list__items__top">
        <div
          class="container_cooperate__list__items__top__left iconfont"
          v-html="item.leftIcon"
        ></div>
        <div class="container_cooperate__list__items__top__mid">
          {{ item.text }}
        </div>
        <div class="container_cooperate__list__items__top__right">
          {{ item.rightText }}
        </div>
      </div>
      <div class="container_cooperate__list__items__bottom">
        <div
          class="container_cooperate__list__items__bottom__items"
          v-for="item of item.child"
          :key="item.childText"
          @click="
            () => {
              if (userInfo?.username && item?.path) {
                router.push(item.path);
              } else {
                router.push('/err');
              }
            }
          "
        >
          <span class="iconfont" v-html="item.childIcon"></span>
          <span class="content">{{ item.childText }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import storage from "../../../utils/storage";
const router = useRouter();
const userInfo = storage.getItem("userInfo");
const cooListItems = [
  {
    leftIcon: "&#xe698;",
    text: "我的工作室",
    rightText: "设置",
    child: [
      {
        childIcon: "&#xe614;",
        childText: "待回复",
      },
      {
        childIcon: "&#xe614;",
        childText: "待确认",
      },
      {
        childIcon: "&#xeca7;",
        childText: "健康包",
      },
      {
        childIcon: "&#xe6ad;",
        childText: "服务设置",
      },
    ],
  },
  {
    leftIcon: "&#xe698;",
    text: "我的会议",
    rightText: "设置",
    child: [
      {
        childIcon: "&#xe614;",
        childText: "会诊中心",
      },
      {
        childIcon: "&#xe614;",
        childText: "邀请我的",
      },
      {
        childIcon: "&#xeca7;",
        childText: "发起会诊",
      },
    ],
  },
  {
    leftIcon: "&#xe698;",
    text: "我的转诊",
    rightText: "设置",
    child: [
      {
        childIcon: "&#xe614;",
        childText: "发起转诊",
      },
      {
        childIcon: "&#xe614;",
        childText: "接收到的",
      },
    ],
  },
  {
    leftIcon: "&#xe698;",
    text: "采购&订单",
    rightText: "设置",
    child: [
      {
        childIcon: "&#xe614;",
        childText: "订购药品",
        path: "/buy",
      },
      {
        childIcon: "&#xe614;",
        childText: "订单管理",
        path: "/orders",
      },
      {
        childIcon: "&#xeca7;",
        childText: "商家管理",
        path: "/business",
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.container_cooperate__list {
  &__items {
    padding: 20rem;
    font-size: 16rem;
    overflow: hidden;
    background-color: #fff;
    margin: 10rem 0 20rem 0;
    box-shadow: 0 3rem 6rem #dededea5;
    border-radius: 5rem;
    &__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rem;
      &__left {
        width: 30rem;
        height: 30rem;
        background-color: #24a9ff;
        font-size: 19rem;
        border-radius: 50%;
        text-align: center;
        line-height: 30rem;
        color: #fff;
      }
      &__mid {
        margin-left: -210rem;
        font-weight: bold;
      }
      &__right {
        color: #24a9ff;
      }
    }
    &__bottom {
      display: flex;
      justify-content: start;
      align-items: center;
      & > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 40rem;
      }
      &__items {
        & .iconfont {
          font-size: 30rem;
          margin-bottom: 10rem;
        }
      }
    }
  }
}
</style>
